<!--班车详情页备份-->
<template>
    <el-container class="layout-container">
        <el-header class="layout-header">
            <div>
                <el-button v-show="readonly" type="primary" @click="readonly = false">编辑</el-button>
                <el-button v-show="!readonly" type="default" @click="readonly = true">取消</el-button>
                <el-button v-show="!readonly" type="primary" @click="handleSave">保存</el-button>
            </div>
            <div></div>
        </el-header>
        <el-container class="layout-container">
            <el-aside class="layout-aside">
                <div class="nav-warp">
                    <el-scrollbar>
                        <div class="nav-item" :class="{'active': activePage === 0}" @click="togglePage(0)">班车管理</div>
                        <div class="nav-item" :class="{'active': activePage === 1}" @click="togglePage(1)">班车套票</div>
                        <div class="nav-item" :class="{'active': activePage === 2}" @click="togglePage(2)">班车站点</div>
                        <div class="nav-item" :class="{'active': activePage === 3}" @click="togglePage(3)">班车座位表</div>
                    </el-scrollbar>
                </div>
            </el-aside>
            <el-main class="layout-main" v-show="activePage === 0">
                <div class="subfield-layout">
                    <div class="subfield-wrap">
                        <div class="subfield-title">信息</div>
                        <div class="subfield-main">
                            <div class="subfield-content">
                                <m-form :fields="fieldList" :readonly="readonly" :value="data" @m-change="handleChange"></m-form>
                            </div>
                        </div>
                    </div>
                </div>
            </el-main>
            <el-main class="layout-main" v-show="activePage !== 0">
                <rel-page v-if="activePage === 1" :page="1"></rel-page>
                <rel-page v-if="activePage === 2" :page="2"></rel-page>
                <rel-page v-if="activePage === 3" :page="3"></rel-page>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
  import MForm from '@/components/common/Form/Form'
  import RelPage from './RelPage'
  import {ref,reactive} from 'vue';
  import {useRoute} from 'vue-router'

  const fieldList = ref([
    {label: '班车编号',field_id: 'shuttle_id',type: 'text',col: 2,disabled:true},
    {label: '班车名称',field_id: 'shuttle_name',type: 'text',col: 2},
    {label: '套票标签编号',field_id: 'packag_label_id',type: 'reference',col: 2,disabled:true},
    {label: '套票标签名称',field_id: 'packag_label_name',type: 'reference',col: 2},
    {label: '站点编号',field_id: 'school_id',type: 'reference',col: 2},
    {label: '站点名称',field_id: 'school_name',type: 'reference',col: 2},
    {label: '说明',field_id: 'mark',type: 'textarea',col: 4},
    {label: '座位总数',field_id: 'seat_total',type: 'number',col: 2,precision: 4},
    {label: '班车座位表编号',field_id: 'shuttle_seat_id',type: 'reference',col: 2},
    {label: '班车座位表名称',field_id: 'shuttle_seat_name',type: 'reference',col: 2},
    {label: '开售时间起',field_id: 'sell_dateime_start',type: 'datetime',col: 2,disabled:true},
    {label: '开售时间止',field_id: 'sell_dateime_end',type: 'datetime',col: 2},
    {label: '班车有效时间起',field_id: 'effective_time_start',type: 'datetime',col: 2},
    {label: '班车有效时间止',field_id: 'effective_time_end',type: 'datetime',col: 2},
    {label: '营运组编号',field_id: 'operation_group_id',type: 'reference',col: 2},
    {label: '营运组名称',field_id: 'operation_group_name',type: 'reference',col: 2},
    {label: '使用标识',field_id: 'is_used',type: 'bool',col: 2, disabled: true},
    {label: '测试',field_id: 'ceshi',type: 'picklist',col: 2,options: [{label:1,value:2}], disabled: true},
  ])

  let data = reactive({}),
    activePage = ref(0),
    readonly = ref(true);
  //数据变化
  function handleChange(val) {
    console.log(1,val);
    let {field,value} = val,
      {field_id,type,entityKey} = field;
    data[field_id] = value;
    console.log(data);
  }
  //保存数据
  function handleSave() {

  }
  function togglePage(page) {
    activePage.value = page;
  }


</script>

<style scoped lang="less">
    @import '../../assets/css/pageDtl.less';
</style>
